the look

for this site was originally inspired by a wiki based web app called Nanoki written in Lua, a scripting language I had been investigating at the time. The clean monochromatic layout of its original example site “Sputnik” (no longer hosted) aligned with my deference towards clean content focused layouts.

This site retains the simple header / content page, text only presentation format of Nanoki minus its revision history recall—of which, articles on this site, including this one, are re-edited and updated accordingly.

Unlike most sites, the darnedest thing has undergone many incremental and substantive changes, as it sought to find its visual “voice”. And much of that influence has been derived from the distraction free editing environment that feeds it.

fonts

spacing and layout all impart a visual “feeling” to a site. But more than anything, fonts express its character. Serifs with their romanticism and sans-serifs with their more clinical expression.

The original site used possibly the most recognizable of fonts, Helvetica throughout—not uncommon and for good reason due to its readability. From that simple beginning, text objects have become differentiated, refining the site’s “look”..

text object	typeface
title	Monolexic (caps) Major Mono Display AdventPro Jost* Roboto Helvetica	monospace grotesque sans-serif**
subtitle table heading	Iosevka Unica One AdventPro Roboto Jost* Helvetica	monospace grotesque sans-serif**
header footer	Quasilexic Roboto Helvetica	quasi-proportional grotesque sans-serif**
body table content	Monolexic Atkinson Hyperlegible Jost* Montserrat Verdana Helvetica	monospace grotesque sans-serif**
quotation excerpt	Monolegible Sanchez Courier	monospace grotesque sans-serif**
code	Iosevka DejaVu Sans Mono	monospace grotesque sans-serif**

**Slender monospace slab-serif typeface customized as an expanded width grotesque (variant) sans-serif font. subtitle / heading incorporates additional side bearing spacing.

The tabular updates of this article more graphically illustrate the progression of the look from recognizable fonts to the final incarnation based solely on Iosevka generated fonts incorporating the dyslexic font principles used for my ereader fonts.

Note: these web fonts have been further tuned specifically for web browsers—losing the open caps and using the vertical capital Q and double-storey lower case a for better legibility on the lower DPI monitors (compared to eink screens).

embellishments

The thin light headings are rendered in a reddish accent to the otherwise monochromatic layout on a soft paper (vim-duochrome) hued background. The use of light title and heading font weights reflects the distraction free design emphasis.. perhaps to the extreme for those with compromised visual acuity (a bit contrarian in lieu of my ever increasing focus on readability).

bold and italics are now rendered in x-height caps (as well as the three word lead in). This refined embellishment came about as a result of the limited weight selection available with the Atkinson Hyperlegible Font—the bold being far too heavy (for my tastes) and the italic visually looking larger by virtue of the elongated slanted strokes.

A matter of personal aesthetic, this feels much more aligned with the distraction free goals, albeit unconventional (but so is the use of the lower case first person “i”).

‧   ‧   •   ‧   ‧

Not perhaps a web designer’s choice of font groupings, weights and colours, the design hopefully expresses a clean, yet readable, minimalistic distraction free layout with a pinch of style and nimble page refreshes.